<script setup lang="ts">
import { ref, watch } from 'vue'
import $time from '@/utils/time'
const props = defineProps({
  modelValue: {
    type: [String, Number, Date, Array],
    default: () => null
  },
  type: {
    type: String,
    default: () => 'date'
  },
  label: {
    type: String,
    default: () => '日期'
  },
  format: {
    type: String,
    default: () => 'YYYY-MM-DD'
  },
  defaultValue: {
    type: [Date, Array],
    default: () => null
  },
  disabled: {
    type: Boolean,
    default: () => false
  },
  clearable: {
    type: Boolean,
    default: () => true
  }
})

const inputValue = ref(props.modelValue ? props.modelValue : '')

const emit = defineEmits(['update:modelValue'])

const change = () => {
  emit('update:modelValue', inputValue.value)
}

watch(
  () => props.modelValue,
  (val) => {
    console.log(inputValue, $time.getCurrentDate(), inputValue.value, 'inputValue')

    inputValue.value = val
  }
)
</script>

<template>
  <el-date-picker
    v-model="inputValue"
    class="!w-full"
    :type="props.type"
    :format="props.format"
    :value-format="props.format"
    :placeholder="'请选择' + props.label"
    :default-value="props.defaultValue"
    :disabled="props.disabled"
    :clearable="props.clearable"
    @change="change"
  />
</template>

<style lang="scss" scoped></style>
